<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">时光源</el-breadcrumb-item>
        <el-breadcrumb-item>欢迎</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="homeImage">
      <!-- <img src="./homeImage.png" alt="" /> -->

      <!--  用户总数  日活跃量     -->
      <el-row>
        <el-col :span="6" :gutter="10" style="margin-bottom: 40px">

          <el-col>
            <div @click="toUser">
              <el-card style="color: #409EFF">
                <div><i class="el-icon-user-solid" />用户总数</div>
                <div style="padding: 10px 0; text-align: center;font-weight: bold;">
                  {{ totalUsers }}
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col style="margin-top: 25px;">
            <el-card style="color: #E6A23C">
              <div><i class="el-icon-odometer" /> 活跃用户总数</div>
              <div style="padding: 10px 0; text-align: center;font-weight: bold">
                {{ activeUsers }}
              </div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 25px;">
            <el-card style="color: #67C23A">
              <div><i class="el-icon-loading" />热度</div>
              <div style="padding: 10px 0; text-align: center;font-weight: bold">
                {{ dailyActivity }}
              </div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 25px;">
            <el-card style="color: #F56C6C">
              <div><i class="el-icon-data-analysis" />浏览之星(前三)</div>
              <div style="padding: 10px 0; text-align: center;font-weight: bold">
                {{ hotVideo }}
              </div>
            </el-card>
          </el-col>
        </el-col>

        <!-- 以上四个属性各用一条折线表示 -->
        <!--折线柱状图-->
        <el-col :span="12" style="margin-left: 200px;">
          <div id="main" style="width: 700px; height: 450px"></div>
        </el-col>
      </el-row>

      <el-row>


        <!--中国地图-->
        <!-- <div style="margin-top: 100px">
          <div id="title">
            <h1>全国用户分布情况：</h1>
          </div>
          <div>
            <div class="map">
              <div id="main" class='charts'></div>
            </div>
          </div>
        </div> -->

      </el-row>

    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
// import dataJson from "../../assets/data";

export default {
  name: "Home",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      totalUsers: '',//用户总数
      activeUsers: '',//活跃用户总数
      dailyActivity: '',//热度
      hotVideo: '',//浏览之星

      // dataList: [//地图数据
      //   { name: '北京', value: this.randomData() },
      //   { name: '天津', value: this.randomData() },
      //   { name: '上海', value: this.randomData() },
      //   { name: '重庆', value: this.randomData() },
      //   { name: '河北', value: this.randomData() },
      //   { name: '河南', value: this.randomData() },
      //   { name: '云南', value: this.randomData() },
      //   { name: '辽宁', value: this.randomData() },
      //   { name: '黑龙江', value: this.randomData() },
      //   { name: '湖南', value: this.randomData() },
      //   { name: '安徽', value: this.randomData() },
      //   { name: '山东', value: this.randomData() },
      //   { name: '新疆', value: 0 },
      //   { name: '江苏', value: this.randomData() },
      //   { name: '浙江', value: this.randomData() },
      //   { name: '江西', value: this.randomData() },
      //   { name: '湖北', value: this.randomData() },
      //   { name: '广西', value: this.randomData() },
      //   { name: '甘肃', value: this.randomData() },
      //   { name: '山西', value: this.randomData() },
      //   { name: '内蒙古', value: this.randomData() },
      //   { name: '陕西', value: this.randomData() },
      //   { name: '吉林', value: this.randomData() },
      //   { name: '福建', value: this.randomData() },
      //   { name: '贵州', value: this.randomData() },
      //   { name: '广东', value: this.randomData() },
      //   { name: '青海', value: this.randomData() },
      //   { name: '西藏', value: this.randomData() },
      //   { name: '四川', value: this.randomData() },
      //   { name: '宁夏', value: this.randomData() },
      //   { name: '海南', value: this.randomData() },
      //   { name: '台湾', value: this.randomData() },
      //   { name: '香港', value: this.randomData() },
      //   { name: '澳门', value: this.randomData() }
      // ]

    }
  },
  methods: {

    /**
     * 折线图
     */
    toUser() {
      this.$router.push('/user');
    },

    /**
     * 中国地图
     */
    // randomData() {
    //   return Math.round(Math.random() * 500);
    // },
    // drawLine() {
    //   let myChart = echarts.init(document.getElementById("main"));
    //   let uploadDataUrl = dataJson;
    //   // 注册地图
    //   echarts.registerMap("china", uploadDataUrl);
    //   let option = {
    //     geo: {
    //       // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
    //       map: "china",
    //       aspectScale: 0.75,
    //       zoom: 1.1,
    //     },
    //     tooltip: {
    //       formatter: '{b}:{c}'
    //     },
    //     // 省会的位置标注
    //     // legend: {
    //     //   orient: 'vertical',
    //     //   left: 'left',
    //     //   data:['']
    //     // },
    //     visualMap: {
    //       min: 0,
    //       max: 1500,
    //       left: '10%',
    //       top: 'bottom',
    //       text: ['高', '低'],
    //       calculable: true,
    //       color: ['#0b50b9', '#FFFFFF']
    //     },
    //     series: [
    //       {
    //         zoom: 1.1,
    //         map: "china",
    //         type: "map",
    //         itemStyle: {
    //           normal: {
    //             borderColor: 'rgba(0, 0, 0, 0.2)'
    //           },
    //           emphasis: {
    //             shadowOffsetX: 0,
    //             shadowOffsetY: 0,
    //             shadowBlur: 20,
    //             borderWidth: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         },
    //         label: {
    //           normal: {
    //             show: true
    //           },
    //           emphasis: {
    //             show: true
    //           }
    //         },
    //         data: this.dataList
    //       }
    //     ],
    //   };
    //   myChart.setOption(option);
    //   window.onresize = function () {
    //     myChart.resize();
    //   }
    // }


  },
  mounted() {//页面中的元素渲染之后才会触发这里

    /*
    * 折线图
    * */
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      title: {
        text: '时光源运营情况预览',
        subtext: '',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        // X轴坐标
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          // 折线  用户总数
          data: [50, 23, 24, 280, 170, 107, 60],
          type: 'line',
          lineStyle: {
            color: "rgb(64,158,255)"
          }
        },
        {
          // 折线  热度
          data: [10, 30, 22, 200, 100, 47, 160],
          type: 'line',
          lineStyle: {
            color: "rgb(103,194,58)"
          }
        },
        {
          // 折线  浏览之星
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          lineStyle: {
            color: "rgb(245,108,108)"
          }
        },
        {
          // 柱形图
          data: [50, 230, 224, 218, 135, 147, 260],
          type: 'bar',
          itemStyle: {
            normal: {
              //这里是重点
              color: "rgb(230,162,60)"
            }
          }
        }
      ]
    };
    //发送请求到后端请求数据
    // this.request.get("/echarts/members").then(res => {
    //   if (res.state == 200) {
    //     //将后端得到的数据放入数组中
    //     // console.log(res)
    //     option.series[1].data = res.data.Y[0]
    //     option.series[0].data = res.data.Y[0]
    //     option.xAxis.data = res.data.X
    //     option.title.subtext = res.data.title
    //     this.totalUsers = res.data.totalUsers
    // console.log(option.subtext)
    //数据准备完毕后在set
    myChart.setOption(option);
    //   }

    // })

    /**
       * 中国地图
       */
    // this.drawLine();
    // this.request.get("/admin/getNewestIp").then(res => {
    //   console.log(res)
    //   if (res.state === 200) {
    //     let cnt = 0
    //     let data = []
    //     for (let i = 0; i < res.data.length; i++) {
    //       data.push({ name: res.data[i].name, value: res.data[i].value, perf: 0 })
    //       cnt += res.data[i].value
    //     }
    //     for (let i = 0; i < data.length; i++) {
    //       let p = data[i].value / cnt * 100
    //       data[i].perf = p.toString().substring(0, 5) + '%'
    //     }
    //     this.series_data = data
    //     this.drawLine();
    //   }
    // })

  },





}

</script>

<style lang="less" scoped>
#title {
  text-align: center;
  color: #636060;
}

.homeImage {
  text-align: center;
}

.charts {
  min-height: 512px;
  min-width: 800px;


}

.charts:first-child div {
  position: static !important;
  width: 100% !important;
}

/deep/ canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>
